<template>
    <div id="server">
       <div class="header">
            <navbar :title="title"></navbar>
            <ul class="tab-list">
                <li class="tab-item" v-for="(item,index) in titleList" :class="{active:index==num}" :key="index" @click="changeTab(index)">
                    <span>{{item}}</span>
                </li>
            </ul>
       </div>
       <div class="placeholder"></div>
       <scroll class="more-list" ref="scroll" 
			:data="gameLists" 
			:scrollY="scrollY" 
			:scrollX="scrollX"
			:bounce="bounce" 
			:pullup="pullup" 
			@scrollToEnd="_getMoreList">
            <div class="gameLists">
                <div class="list" v-for="(item,index) in gameLists" :key="index" @click=goDetail(item.gameid)>
                    <div class='avator'>
                        <img  v-lazy="item.game_icon" alt="" width="64">
                    </div>
                    <div class="info">
                      <div class="desc">
                        <div class="name">{{item.gamename}}</div>
                        <div class="time-label">
                            <div class="time">{{item.server}} | {{item.start_time | filtertimestamp}}</div>
                            <div class="label">
                               <span v-for="(label,index) in item.welfare.slice(0,3)" :key="index" :style="{background:label.color}">{{label.name}}</span>
                               <!-- <span v-for="(label,index) in item.welfare" :key="index" :style="{background:label.color}">{{label.name | labelFilter }}</span> -->
                            </div>
                        </div>
                      </div>
                      <div class="arrow">
                          <i class="icon iconfont">&#xe601;</i>
                      </div>
                    </div>
                </div>
                 <div class="loadlist" v-show="gameLists.length">
                    <loadinglist :row="row" :more="more"></loadinglist>
                </div>
            </div>
        </scroll>
        <div class="loading-wrap" v-if="showLoading">
          <loading></loading>
        </div>
    </div>
</template>

<script>
import Loading from "common/loading";
import Loadinglist from "common/LoadingList";
import Scroll from "common/scroll";
import navbar from "common/navbar";
import { getServer } from "api/game_box";
import {formatDate} from 'js/date'
import { Toast } from 'vant';
export default {
  data() {
    return {
      title: "开服表",                                 //导航标题
      num: "",                                         //当前tab的index
      showLoading: true,                              //初始化页面加载
      titleList: ["今日开服", "明日开服", "历史开服"],  //tab文字
      gameLists: [],      //开服列表数据
      scrollY: true,
      scrollX: false,
      pullup: true,
      beforeScroll: true, 
      bounce: false,      //下拉加载触底是否可以弹回
      isload: false,      //判断是否正在加载
      row: true,          //下拉加载动画杨树
      loadlistShow: true, //初始化下拉加载loading动画
      page: 1,            //初始化开服页数
      type: 1,            //初始化游戏类型
      more:true,          //下拉加载是否还有更多
    };
  },
  created() {
    if(this.$route.params.tab){
        let tab=this.$route.params.tab;
        this.changeTab(tab)
    }else{
       this.num=0;
    }
    this.loadData();
  },
  methods: {
    changeTab(index) {
      Toast.clear();
      this.num = index;
      this.gameLists = [];
      this.showLoading = true;
      this.more = true;
      this.isload = false;
      this.type = parseInt(index) + 1;
      this.page = 1;
      this.loadData();
      this.$router.replace({
            path: `/server/${this.num}`,
      });
    },
    loadData() {
      getServer(this.page, this.type).then(res => {
        if (res.data.error == 0) {
          this.showLoading = false;
          this.gameLists = res.data.content.data;
          let totalPage=res.data.content.totalPage;
          if(this.page==totalPage){
              this.more = false;
              this.isload=true;
          }
        }else{
           this.showLoading = false;
           this.more = false;
           this.isload=true;
        }
      });
    },
    _getMoreList() {
      if (this.isload == true) {
        return;
      }
      this.page++;
      this.isload = true;
      getServer(this.page, this.type)
        .then(res => {
          if (res.data.error == 0) {
            let totalPage=res.data.content.totalPage;
            res = res.data.content.data;
            this.isload = false;
            this.gameLists = this.gameLists.concat(res);
            if(this.page==totalPage){
              this.more = false;
              this.isload = true;
            }
          }
        })
    },
    goDetail(id) {
      this.$router.push({
        path: `/gameDetail/${id}`,
      });
    },
  },
  filters:{
    filtertimestamp(time){
        let date = new Date(time*1000);
        return formatDate(date, 'MM-dd hh:mm');
    },
    labelFilter(text){
        return text.substr(0,8);
    }
  },
  components: {
    Loading,
    Loadinglist,
    Scroll,
    navbar
  },
  destroyed(){
      Toast.clear();
  }
};
</script>

<style scoped lang="scss">
@import "~styles/variable.scss";
@import "~styles/mixins.scss";
.placeholder{
    width:100%;
    height:1.6rem;
}
#server {
  .header {
    width: 100%;
    height: 1.6rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
  }
  .main {
    width: 7.5rem;
    margin: 0 auto;
  }
  .title {
    width: 7.5rem;
    margin: 0 auto;
    z-index: 999;
    text-align: center;
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0.32rem;
    color: #fff;
    background: $color-sub-theme;
  }
  .tab-list {
    padding-top: 0.8rem;
    width: 7.5rem;
    margin: 0 auto;
    z-index: 999;
    display: flex;
    background: #fff;
    border-bottom: 1px solid #ddd;
    .tab-item {
      line-height: 0.8rem;
      flex: 1;
      text-align: center;
      font-size: 0.32rem;
      &.active {
        span {
          display: inline-block;
          color: $color-focus;
          border-bottom: 2px solid $color-focus;
        }
      }
    }
  }
  .loadlist {
    background: #fff;
  }
  .gameLists {
    .list {
      display: flex;
      padding: 0.2rem;
      background: #fff;
      .info {
          flex: 1;
          margin-left: 0.16rem;
          display: flex;
          padding-bottom: 0.18rem;
          border-bottom: 1px solid #cdced3;
          .desc {
            flex: 1;
            display:flex;
            flex-direction: column;
            justify-content: space-around;
            .name{
              font-size:$font-size-m;
            }
            .time {
              color: #02a1fd;
            }
            .time-label{
              margin-top:0.3rem;
            }
            .label{
              span{
                float: left;
                padding: 0.02rem 0.06rem;
                color: #fff;
                margin: 0.02rem;
                border-radius: 4px;
                font-size:9px;
              }
            }
          }
          .arrow{
              display:flex;
              flex-direction: column;
              justify-content: center;
              .icon{
                  font-size:0.4rem;
                  color:$color-focus;
              }
          }
        }
      .avator {
        width: 1.4rem;
        height: 1.4rem;
        img {
          width: 1.4rem;
          height: 1.4rem;
        }
      }
    }
  }
}
</style>